import React, { Component } from 'react';
import {
    Row,
    Col,
    Input,
    Upload,
    message,
} from 'antd';
import 'antd/dist/antd.css';
import Header from '../../common/header';
import Footer from '../../common/footer';
import { getSettingData,setSettingData } from '../../api';
import App from '../setting/appRadio'
import './indexx.scss'

// 图像64位编码
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);

}

// 上传前的限制
function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

class Setting extends Component {
    constructor(props){
        super(props);
        this.state={

            settingData: {
                username:"",
                picUrl:"",
                userEmail:"",
                sex:1,
                phone:""
            },
            loading: false,
            flag:false,
            inputName:"",
            inputSex:1,
            inputEmail:"",
            inputPhone:"",
            img:null,
        }
    }


    handleName=(e)=>{
        if(e && e.target && e.target.value){
            let value = e.target.value;
            this.setState(()=>({inputName:value }))
        }
        console.log(this.state.inputName)
    }

    getChildrenMsg = (result, msg) => {
        this.setState({
            inputSex: msg
        })
        console.log(this.state.inputSex)
    }

    handleEmail=(e)=>{
        if(e && e.target && e.target.value){
            let value = e.target.value;
            this.setState(()=>({inputEmail:value }))
        }
        console.log(this.state.inputEmail)
    }

    handlePhone=(e)=>{
        if(e && e.target && e.target.value){
            let value = e.target.value;
            this.setState(()=>({inputPhone:value }))
        }
        console.log(this.state.inputPhone)
    }

    handleAll=()=>{
        this.id = JSON.parse(localStorage.getItem("loginObj")).userId;
        console.log(this.id)
        let { imageUrl } = this.state
        console.log(imageUrl)
        console.log(this.state.inputName)
        console.log(this.state.inputSex)
        console.log(this.state.inputEmail)
        console.log(this.state.inputPhone)
        console.log(this.state.img)

        if(this.state.flag){
            setSettingData(this.id,this.state.inputName,this.state.inputSex,this.state.inputEmail,this.state.inputPhone     ).then((res)=>{
                if(res.data.code===200){
                    console.log("you1")
                    message.success('保存成功');
                }
                else{console.log(res.data.code)}
            });
        }
       else{
            setSettingData(this.id,this.state.inputName,this.state.inputSex,this.state.inputEmail,this.state.inputPhone).then((res)=>{
                console.log("you2");
                message.success('保存成功');
            });
        }


    }

    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                    flag:true,
                    img:info.file
                }),
            );
            console.log(info.file)
        }
    };


    componentDidMount() {
        this.id = JSON.parse(localStorage.getItem("loginObj")).userId;

        //获取用户设置信息
        getSettingData(this.id).then( (res)=>{
            if(res.data.code===200) {
                this.setState({
                    settingData:res.data.settingData,
                    inputName:res.data.settingData.username,
                    inputEmail:res.data.settingData.userEmail,
                    inputPhone:res.data.settingData.phone,
                    inputSex:res.data.settingData.sex,
                })
            }
            else{ console.log("请求数据错误")}
        })
    }


    render(){
        console.log(this.state.settingData)
        const uploadButton = (
            <div>
                <div className="ant-upload-text">更换头像</div>
            </div>
        );
        let { imageUrl } = this.state
        console.log(imageUrl)
        let userPicUrl =this.state.settingData.picUrl
        const settingData=this.state.settingData
        return(
            <div className='setting'>
                <div className="setting-header" style={{ backgroundColor:"#242424" }}><Header /></div>
                <div className='setting-content' style={{ marginTop:"30px",minWidth:"1200px" }}>
                    <Row >
                        <Col span={4}></Col>
                        <Col span={19} style={{ paddingBottom:"30px" }}>
                            <Row>
                                <Col span={15} style={{ marginLeft:"30px"}}>
                                    <div style={{ height:"70px"}}>
                                        <span style={{ marginTop:"50px",fontSize:"20px"}}>基本设置</span>
                                        <span style={{ marginLeft:"50px",fontSize:"14px"}}>
                                           昵称：
                                           <Input onPressEnter={this.handleName} placeholder={settingData.username} style={{ width:"250px"}}  />
                                       </span>
                                    </div>
                                    <div style={{ marginLeft:"130px",fontSize:"14px",height:"60px"}}>
                                        性别：
                                        <App parent={this} value={settingData.sex}/>
                                    </div>
                                    <div style={{ marginTop:"10px"}}>
                                        <span style={{ fontSize:"20px"}}>绑定设置</span>
                                        <span style={{ marginLeft:"50px",fontSize:"14px"}}>
                                           邮箱：
                                           <Input onChange={this.handleEmail} placeholder={settingData.userEmail} style={{ width:"250px"}}  />
                                       </span>
                                    </div>
                                    <div style={{ marginTop:"40px",height:"80px"}}>
                                        <span style={{ marginLeft:"130px",fontSize:"14px"}}>
                                           手机：
                                           <Input onChange={this.handlePhone} placeholder={settingData.phone} style={{ width:"250px"}}  />
                                       </span>
                                    </div>
                                </Col>
                                <Col span={5}>
                                    <span>
                                       <Upload
                                           name="avatar"
                                           listType="picture-card"
                                           className="avatar-uploader"
                                           showUploadList={false}
                                           action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                           beforeUpload={beforeUpload}
                                           onChange={this.handleChange}
                                       >
                                           {this.state.flag?<img src={imageUrl} alt="avatar" style={{ width: '100%' }} />:(settingData.picUrl ? <img src={'http://cyq.center:8000/'+settingData.picUrl} alt="avatar" style={{ width: '100%' }} /> :(imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> :uploadButton))}
                                   </Upload>
                                   </span>
                                </Col>
                            </Row>
                            <Row>
                                <div className="playText" onClick={this.handleAll} style={{ marginTop:"30px",marginLeft:"480px",cursor:"pointer"}}>
                                    保存
                                </div>
                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </div>
                <div className='setting-footer'>
                    <Footer />
                </div>
            </div>
        )
    }

}
export default Setting
